<template>
  <div class="background">
    <div class="login-wrap">
      <el-form label-position="left" :model="form" :rules="loginRule" ref="ruleForm" label-width="0px" class="demo-ruleForm login-container">
        <h3 class="title">用户登录</h3>
        <el-form-item prop="username">
          <el-input type="text" v-model="form.username"  placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" v-model="form.password"  placeholder="请输入密码"></el-input>
        </el-form-item>

        <el-form-item style="width:100%;">
          <el-button type="primary" style="width:100%;" @click="ajxa()" >登录</el-button>
        </el-form-item>
        <el-link href="/register" >没有账号？ 点击注册</el-link>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'login',
  data() {
    var validatePass2 = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入密码'));
      }
      return callback();
    };

    var validatePass = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入账号'));
      }
      return callback();
    };

    return {
      form:{
        username: '',
        password: '',
      },
      loginRule : {
        username:[
          {validator: validatePass,trigger:'blur'}
        ],
        password:[
          { validator: validatePass2,trigger:'blur'}
        ]
      }
    }
  },
  methods: {
    ajxa : function(username,password){
      this.$refs.ruleForm.validate(valid=>{
        console.log(valid);
        if(!valid) return;

        let form = this.form;

        this.$axios.post('/api/user/login',form,{
        }).then(res=>{
          console.log(res);

          if (res.data==false){
            this.$message.error('用户名或密码错误');

          }
          else{
            this.$message.success('登录成功');

            sessionStorage.setItem("token",res.data.token);
            sessionStorage.setItem("user",res.data.username);

            sessionStorage.setItem("permission",res.data.permission);
            this.$router.push('/homepage/vehicle');
          }

        }).catch(err=>{
          console.log(err);
        })

      })
    }
  }
}

</script>

<style>
.background {
  background: url('../../../static/images/bg.jpg') center center no-repeat;
  height: 920px;
}
.login-wrap {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-top: 10%;
}
.login-container {
  border-radius: 10px;
  margin: 0px auto;
  width: 350px;
  padding: 30px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  text-align: left;
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}
.title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
.remember {
  margin: 0px 0px 35px 0px;
}
.code-box {
  text-align: right;
}
.codeimg {
  height: 40px;
}
</style>


